---
title: Chains
description: Customizing chains
---

# Chains

## Customizing chains

RainbowKit is designed to integrate with [wagmi’s `chain` object](https://wagmi.sh/react/chains). Check out the list of supported chains [here](https://wagmi.sh/react/chains#supported-chains).

### Customizing the initial chain

By default, RainbowKit will connect to the first chain supplied to Wagmi. This behavior can be customized via the `initialChain` prop.

The initial chain can be configured using a chain ID.

```tsx
<RainbowKitProvider initialChain={1}>
```

As a convenience, you can also pass a chain object.

```tsx
<RainbowKitProvider initialChain={mainnet}>
```

### Custom chain metadata

Several chain icons and backgrounds are provided by default, but you can customize the icon and background for each chain using the `iconUrl` and `iconBackground` properties.

Example with `getDefaultConfig`

```tsx
import { mainnet, optimism } from 'wagmi/chains';

const config = getDefaultConfig({
  chains: [
    {
      ...mainnet,
      iconBackground: '#000',
      iconUrl: 'https://example.com/icons/ethereum.png',
    },
    {
      ...optimism,
      iconBackground: '#ff0000',
      iconUrl: 'https://example.com/icons/optimism.png',
    },
  ],
});
```

Example with `createConfig`

```tsx
import { mainnet, optimism } from 'wagmi/chains';
import { Chain } from '@rainbow-me/rainbowkit';

const chains: readonly [Chain, ...Chain[]] = [
  {
    ...mainnet,
    iconBackground: '#000',
    iconUrl: 'https://example.com/icons/ethereum.png',
  },
  {
    ...optimism,
    iconBackground: '#ff0000',
    iconUrl: 'https://example.com/icons/optimism.png',
  },
];

const config = createConfig({
  chains,
});
```
